<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>{:__('注册账号')} - {$options.title}</title>

    <!-- ZUI 标准版压缩后的 CSS 文件 -->
<!--    <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/zui/1.10.0/css/zui.min.css">-->

    <link rel="stylesheet" href="/static/index/login/css/tailwind.min.css"/>
    <link rel="stylesheet" href="/static/index/toast/css/iziToast.min.css">
    <link rel="stylesheet" href="/static/index/login/css/style.css"/>


</head>
<body>
    <div class="relative min-h-screen flex">
        <div class="flex flex-col sm:flex-row items-center md:items-start sm:justify-center md:justify-start flex-auto min-w-0 bg-white">
            <div class="sm:w-1/2 xl:w-3/5 h-full hidden md:flex flex-auto items-center justify-center p-10 overflow-hidden bg-purple-900 text-white bg-no-repeat bg-cover relative" style="background-image: url(/static/index/login/img/img.jpg)">
                <div class="absolute bg-gradient-to-b from-indigo-600 to-blue-500 opacity-75 inset-0 z-0"></div>
                <div class="w-full max-w-md z-10">
                    <div class="sm:text-4xl xl:text-5xl font-bold leading-tight mb-6">AI智能匹配供货商</div>
                    <div class="sm:text-sm xl:text-md text-gray-200 font-normal">我们通过多年累计的供货商的数据经AI智能匹配向您提供最适合您的，最有竞争力的货源。</div>
                </div>
                <ul class="circles">
                    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
                </ul>
            </div>
            <div class="md:flex md:items-center md:justify-center w-full sm:w-auto md:h-full w-2/5 xl:w-2/5 p-8 md:p-10 lg:p-14 sm:rounded-lg md:rounded-none bg-white">
                <div class="max-w-md w-full mx-auto space-y-8">
                    <div class="text-center">
                        <a href="/">
                            <h2 class="mt-6 text-3xl font-bold text-gray-900">{$options.title}</h2>
                        </a>

                        <p class="mt-2 text-sm text-gray-500">{:__('注册账号')}</p>
                    </div>
<!--                    <div class="flex flex-row justify-center items-center space-x-3">-->
<!--                        <a href="javascript:" class="w-11 h-11 items-center justify-center inline-flex rounded-2xl font-bold text-lg bg-blue-900 hover:shadow-lg cursor-pointer transition ease-in duration-300">-->
<!--                            <img class="w-4 h-4" src="" />-->
<!--                        </a>-->
<!--                        <a href="javascript:" class="w-11 h-11 items-center justify-center inline-flex rounded-2xl font-bold text-lg text-white bg-blue-400 hover:shadow-lg cursor-pointer transition ease-in duration-300">-->
<!--                            <img class="w-4 h-4" src="" />-->
<!--                        </a>-->
<!--                        <a href="javascript:" class="w-11 h-11 items-center justify-center inline-flex rounded-2xl font-bold text-lg text-white bg-blue-500 hover:shadow-lg cursor-pointer transition ease-in duration-300">-->
<!--                            <img src="" class="w-4 h-4" />-->
<!--                        </a>-->
<!--                    </div>-->
<!--                    <div class="flex items-center justify-center space-x-2">-->
<!--                        <span class="h-px w-16 bg-gray-200"></span>-->
<!--                        <span class="text-gray-300 font-normal">使用电子邮箱登录</span>-->
<!--                        <span class="h-px w-16 bg-gray-200"></span>-->
<!--                    </div>-->
                    <form class="mt-8 space-y-6 ajaxForm" action="" method="POST">
                        <div class="relative">
                            <label class="text-sm font-bold text-gray-700 tracking-wide">电子邮箱<span style="color: red">*</span></label>
                            <input name="email" class="input w-full text-base border-b border-gray-300 focus:outline-none focus:border-indigo-500" type="email" placeholder="请输入电子邮箱" />
                        </div>
                        <div class="relative">
                            <label class="text-sm font-bold text-gray-700 tracking-wide">{:__('联系人')}<span style="color: red"></span></label>
                            <input name="name" class="input w-full text-base border-b border-gray-300 focus:outline-none focus:border-indigo-500" type="text" placeholder="{:__('请输入联系人')}" />
                        </div>
                        <div class="relative">
                            <label class="text-sm font-bold text-gray-700 tracking-wide">手机号码<span style="color: red"></span></label>
                            <input name="tel" class="input w-full text-base border-b border-gray-300 focus:outline-none focus:border-indigo-500" type="text" placeholder="{:__('请输入手机号码')}" />
                        </div>
                        <div class="mt-8 content-center">
                            <label class="text-sm font-bold text-gray-700 tracking-wide">登录密码<span style="color: red">*</span></label>
                            <input name="password" class="input w-full content-center text-base border-b border-gray-300 focus:outline-none focus:border-indigo-500" type="password" placeholder="请输入密码" />
                        </div>
                        <div class="mt-8 content-center">
                            <label class="text-sm font-bold text-gray-700 tracking-wide">确认密码<span style="color: red">*</span></label>
                            <input name="repassword" class="input w-full content-center text-base border-b border-gray-300 focus:outline-none focus:border-indigo-500" type="password" placeholder="请再次输入密码" />
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <input id="checkbox" name="checkbox" type="checkbox" class="h-4 w-4 bg-blue-500 focus:ring-blue-400 border-gray-300 rounded" />
                                <label for="checkbox" class="ml-2 block text-sm text-gray-900">
                                    已阅读并同意<a href="" class="text-indigo-400 hover:text-blue-500">《{:__('服务条款')}》</a>和<a href="" class="text-indigo-400 hover:text-blue-500">《{:__('隐私政策')}》</a>
                                </label>
                            </div>
<!--                            <div class="text-sm">-->
<!--                                <a href="#" class="text-indigo-400 hover:text-blue-500">忘记密码？</a>-->
<!--                            </div>-->
                        </div>
                        <div>
                            <button type="submit" class="w-full flex justify-center bg-gradient-to-r from-indigo-500 to-blue-600 hover:bg-gradient-to-l hover:from-blue-500 hover:to-indigo-600 text-gray-100 p-4 rounded-full tracking-wide font-semibold shadow-lg cursor-pointer transition ease-in duration-500">
                                {:__('注册')}
                            </button>
                        </div>
                        <p class="items-center justify-center mt-10 text-center text-md text-gray-500">
                            <span>已经有账号了？</span>
                            <a href="{:url('/login')}" class="text-indigo-400 hover:text-blue-500 no-underline hover:underline cursor-pointer transition ease-in duration-300 ">
                                {:__('去登录')}
                            </a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/index/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="/static/index/toast/js/iziToast.min.js" type="text/javascript"></script>


    <script>
        $(document).ready(function() {
            // 监听表单提交事件
            $('.ajaxForm').on('submit', function(e) {
                // 阻止表单的默认提交行为
                e.preventDefault();

                // 收集表单数据
                var formData = $(this).serialize();

                // 发送异步请求
                $.ajax({
                    url: $(this).attr('action'), // 你的服务器处理表单数据的端点
                    type: 'POST', // 请求方法，通常是POST
                    data: formData, // 表单数据
                    dataType: 'json', // 期望服务器返回的数据类型
                    success: function(e) {
                        if(e.code == 0){
                            iziToast.error({
                                title: 'Error',
                                message: e.msg,
                                position: 'topRight',
                                transitionIn: 'fadeInDown'
                            });
                        }
                        if(e.code == 1){
                            iziToast.success({
                                message: '注册成功',
                                position: 'topRight',
                                transitionIn: 'bounceInLeft',
                                // iconText: 'star',
                                onOpen: function(){
                                    console.log('callback abriu! success');
                                    location.href = "/";
                                },
                                onClose: function(){
                                    console.log("callback fechou! success");
                                }
                            });
                        }

                    },
                    error: function(xhr, status, error) {
                        // 请求失败时的回调函数
                        console.error('错误:', error);
                        // 在这里处理错误情况，比如显示错误信息给用户
                    }
                });
            });
        });
    </script>

</body>
</html>
